<template>
  <div :class="['control-bar-container', { disabled }]" :style="{ height: height }">
    <!-- <div :class="['control-bar']" ref="control-bar">
      <div class="left">
        <div class="title">{{ $t("text1") }}</div>
        <div class="info">
          {{ info }}
        </div>
      </div>
      <div class="right" @click="handlSet" :style="{ backgroundImage: `url(${rightIcon}) ` }">
        {{ $t("text3") }}
      </div>
    </div> -->
    <div class="modeList clearfix">
      <!-- <ul style="margin-top:1.6rem;"> -->
      <ul>
        <li @click="handlEnd(0)">
          <div :class="positionSelect == 0 ? 'mode mode1ON' : 'mode mode1OFF'"></div>
          <p id="cycle" :class="positionSelect == 0 ? 'active' : ''">助眠</p>
        </li>
        <li @click="handlEnd(1)">
          <div :class="positionSelect == 1 ? 'mode mode2ON' : 'mode mode2OFF'"></div>
          <p id="cycle" :class="positionSelect == 1 ? 'active' : ''">止鼾</p>
        </li>
        <li @click="handlEnd(2)">
          <div :class="positionSelect == 2 ? 'mode mode3ON' : 'mode mode3OFF'"></div>
          <p id="cycle" :class="positionSelect == 2 ? 'active' : ''">按摩</p>
        </li>
      </ul>
    </div>
    <div class="card" v-show="positionSelect == 0">
      <HomeControlBar :name="$t('translate12')" :isenglish="$i18n.locale == 'en-US'" iconName="ic_position" :active="true"
        @handleClick="handleClick1" info="selectList[siteSelection]">
        <div>
          <ul class="spinnerWrap appear" v-show="true">
            <li v-for="(i, index) in selectList" :key="index" :class="siteSelection == index ? 'spinnerList checkedBg' : 'spinnerList'
              " @click="handlSelect1(index)">
              {{ i }}
            </li>
          </ul>
        </div>

      </HomeControlBar>
    </div>
    <div class="card" v-show="positionSelect == 1">
      <div class="fnItem padTwoItem2">
        <div class="fnWrap">
          <p class="fnName">模式选择</p>
        </div>
        <div class="fnBox" @click="handlSwitch">
          <div :class="alarmSwitch == 1 ? 'fnSlider active' : 'fnSlider'">
            <div class="sliderBtn"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="card" v-show="positionSelect == 2">
      <div class="fnItem padTwoItem2">
        <div class="fnWrap">
          <p class="fnName">模式选择</p>
        </div>
        <div class="fnBox" @click="handlSwitch">
          <div :class="alarmSwitch == 1 ? 'fnSlider active' : 'fnSlider'">
            <div class="sliderBtn"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import messageInterval from "@/components/messageInterval.vue";
import HomeControlBar from "@/components/HomeControlBar.vue";
export default {
  data() {
    return {
      active1: true,
      time: 0,
      timer: "",
      isFold: true,

      selectList: [
        this.$t("translate13"), this.$t("translate14"), this.$t("translate15")
      ],
    };
  },
  components: {
    messageInterval,
    HomeControlBar
  },
  props: {
    name: {
      default: "Name",
      type: String,
    },
    info: {
      default() {
        return this.$t("text4");
      },
      type: String,
    },
    iconName: {
      default: "",
      type: String,
    },

    disabled: {
      default: false,
      type: Boolean,
    },
  },
  computed: {
    ...mapGetters(["imgPath"]),
    ...mapState(["darkMode", "posture"]),
    ...mapState({
      positionSelect: (state) => state.positionSelect.mode,
      modeSelect: (state) => state.modeSelect.action,
      InterventionTime: (state) => state.InterventionTime.InterventionTime,

      foot: (state) => state.Massage.foot,
      frequency: (state) => state.Massage.frequency,
      head: (state) => state.Massage.head,
    }),
    columns() {
      let arr = [];
      for (let i = 62; i <= 127; i++) {
        arr.push(i + this.$t("text3"));
      }
      return arr;
    },
    up() {
      return require(`../assets/${this.imgPath}down.png`);
    },
    // stage1Value: {
    //   get() {
    //     return this.stage1;
    //   },
    //   set(i) {
    //     let contents = {};
    //     contents.sid = "stage1";
    //     contents.data = {};
    //     contents.data.stage1 = i;
    //     // this.$store.dispatch("sendCommand", { data: contents });
    //     this.$store.commit("UPDATE_DEVICE_DATA", contents);
    //     // this.$store.commit("UPDATE_STATE", {
    //     //   name: "lrAirsacPresssure",
    //     //   value: i,
    //     // });
    //   },
    // },
    // IlluminanceValue: {
    //   get() {
    //     return this.Illuminance;
    //   },
    //   set(i) {
    //     let contents = {};
    //     contents.sid = "Illuminance";
    //     contents.data = {};
    //     contents.data.Illuminance = i;
    //     // this.$store.dispatch("sendCommand", { data: contents });
    //     this.$store.commit("UPDATE_DEVICE_DATA", contents);
    //     // this.$store.commit("UPDATE_STATE", {
    //     //   name: "lrAirsacPresssure",
    //     //   value: i,
    //     // });
    //   },
    // },

    activeColor() {
      return this.darkMode ? "#317af7" : "#0A59F7";
    },
    rightIcon() {
      if (!this.iconName) {
        return "";
      }
      if (this.iconName.startsWith("ic_")) {
        return this.darkMode
          ? require(`../assets/ic_list_right_Dark.png`)
          : require(`../assets/${this.iconName}.png`);
      }
      return this.posture
        ? require(`../assets/ic_${this.iconName}_On.png`)
        : require(`../assets/${this.imgPath}ic_${this.iconName}_Off.png`);
    },
    height() {
      return "auto";
    },
  },
  watch: {},
  methods: {
    handleFold() {
      this.isFold = !this.isFold;
    },
    handlSwitch() {
      let data = {};
      data = {
        motionDetected: {
          zoneA: this.alarmSwitch == 1 ? 0 : 1,
        },
      };
      this.$store.dispatch("setDevInfo", data);
    },
    // handlValue1(i) {
    //   let data = {};
    //   data = {
    //     Illuminance: {
    //       Illuminance: i,
    //     },
    //   };
    //   this.$store.dispatch("setDevInfo", data);
    // },

    handlEnd(i) {
      let data = {};
      data = {
        positionSelect: {
          mode: i,
        },
      };
      this.$store.dispatch("setDevInfo", data);
    },

    shadeHide() {
      this.layerInterval1 = false;
      this.layerInterval2 = false;
      this.layerInterval3 = false;
      this.layerInterval4 = false;
    },

    handlSet(e) {
      if (this.disabled) {
        return;
      }
      this.$router.push("deviceInfo");
    },
    // handleClick(e) {

    // },
  },
};
</script>

<style lang="less" scoped>
@import url("../style/controlBar.less");

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.card {
  .fnItem {
    width: calc(100% - 2.4rem);
    height: 6.4rem;
    display: flex;
    justify-items: center;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    margin: 0 auto;

    .fnWrap {
      width: 68%;

      .fnName {
        font-size: 1.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--emui_text_primary);
      }
    }

    .fnBox {
      .fnSlider {
        position: relative;
        width: 3.6rem;
        height: 2rem;
        border-radius: 1.6rem;
        background: var(--emui_control_normal);
      }

      // .dark .fnSlider {
      //   background: rgba(255, 255, 255, 0.1);
      // }

      .fnSlider .sliderBtn {
        width: 1.6rem;
        height: 1.6rem;
        background: var(--emui_color_fg1);
        position: absolute;
        top: 50%;
        right: 1.8rem;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        border-radius: 1.5rem;
        box-shadow: 0 0.1rem 0.3rem var(--emui_mask_thin);
      }

      .active {
        background: var(--emui_accent);

        .sliderBtn {
          right: 0.2rem;
        }
      }
    }
  }
}

.control-bar-container {
  background-color: var(--emui_card_panel_bg);
  border-radius: var(--emui_corner_radius_large);
  height: 6.4rem;
  padding: 0;
  width: calc(100% - 1.2rem) !important;
  margin-bottom: 1.2rem;
  margin-left: 0.6rem;
  // overflow: hidden;
}

.fold {
  text-align: center;
  margin-bottom: 1.6rem;
  color: var(--emui_mask_light);
  font-size: 1.4rem;

  p {
    color: var(--emui_text_secondary);
  }

  .down {
    b {
      background-position: 0 -0.6rem;
      transform: rotate(180deg);
    }
  }
}

// .right {
//     width: auto !important;
//     line-height: 6.4rem;
//     padding-right: 2.5rem;
//     font-size: 1.4rem;
//     background-position: 100% 50%;
//     color: var(--emui_text_secondary);
// }

.textp {
  color: var(--emui_text_secondary);
  font-size: 1.2rem;
  line-height: 3.6rem;
}

.modeList {
  width: calc(100% - 3.2rem);
  height: 8.8rem;
  display: flex;
  // display: flex;
  // justify-content: left;
  // justify-items: flex-start;
  // align-content: center;
  // align-items: center;
  margin: 0 auto;

  ul {
    display: inline-flex;
    width: 100%;
    justify-content: space-around;
    align-content: center;

    li {
      display: flex;
      justify-content: center;
      justify-items: center;
      align-items: center;
      flex-direction: column;
      width: 25%;

      .mode {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background: url("../assets/icon/ic_sleepaid_Off.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        // background-color: rgba(0, 0, 0, 0.06);
      }

      .mode1OFF {
        background: url("../assets/icon/ic_sleepaid_Off.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        //background-color: rgba(0, 0, 0, 0.06);
      }

      .mode1ON {
        background: url("../assets/icon/ic_sleepaid_On.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        // background-color: rgba(0, 0, 0, 0.06);
        background-color: #0a59f7;
      }

      .mode2OFF {
        background: url("../assets/icon/ic_ssnoring_Off.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        // background-color: rgba(0, 0, 0, 0.06);
      }

      .mode2ON {
        background: url("../assets/icon/ic_ssnoring_On.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        background-color: #0a59f7;
      }


      .mode3OFF {
        background: url("../assets/icon/ic_massage_Off.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        //background-color: rgba(255, 255, 255, 0.06);
      }

      .mode3ON {
        background: url("../assets/icon/ic_massage_On.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        background-color: #5291ff;
      }

      p {
        display: block;
        margin-top: 0.4rem;
        font-size: 1.2rem;
        line-height: 1.6rem;
        color: var(--emui_mask_regular);
        text-align: center;
      }

      .active {
        color: #0a59f7;
      }

      // #cycle {
      //     margin-left: 0.6rem;
      // }
    }
  }
}

.dark .modeList {
  width: calc(100% - 3.2rem);
  height: 8.8rem;
  display: flex;
  justify-content: left;
  justify-items: flex-start;
  align-content: center;
  align-items: center;
  margin: 0 auto;

  ul {
    display: inline-flex;
    width: 100%;
    justify-content: space-around;
    align-content: center;

    li {
      .mode {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background: url("../assets/icon/ic_sleepaid_DarkOff.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        // background-color: rgba(0, 0, 0, 0.06);
      }

      .mode1OFF {
        background: url("../assets/icon/ic_sleepaid_DarkOff.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        //background-color: rgba(0, 0, 0, 0.06);
      }

      .mode1ON {
        background: url("../assets/icon/ic_sleepaid_DarkOn.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        // background-color: rgba(0, 0, 0, 0.06);
        background-color: #0a59f7;
      }

      .mode2OFF {
        background: url("../assets/icon/ic_ssnoring_DarkOff.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        // background-color: rgba(0, 0, 0, 0.06);
      }

      .mode2ON {
        background: url("../assets/icon/ic_ssnoring_DarkOn.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        background-color: #0a59f7;
      }


      .mode3OFF {
        background: url("../assets/icon/ic_massage_DarkOff.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        //background-color: rgba(255, 255, 255, 0.06);
      }

      .mode3ON {
        background: url("../assets/icon/ic_massage_On.png") no-repeat;
        background-size: 4rem 4rem;
        background-position: center center;
        background-color: #5291ff;
      }



      p {
        display: block;
        margin-top: 0.4rem;
        font-size: 1.2rem;
        line-height: 1.6rem;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
      }

      .active {
        color: #5291ff;
      }

      // #cycle {
      //     margin-left: 0.6rem;
      // }
    }
  }
}

.volume {
  width: calc(100% - 3.2rem);
  height: 6.4rem;
  display: flex;
  justify-content: left;
  justify-items: flex-start;
  align-content: center;
  align-items: center;
  margin: 0 auto;

  .left {
    width: 25%;
    height: auto;
    text-align: left;
    min-height: 3.9rem;
    color: rgba(0, 0, 0, 0.9);
    font-size: 1.6rem;
    padding-right: 1rem;

    p {
      color: rgba(0, 0, 0, 0.6);
      margin-top: 0.2rem;
      font-size: 1.2rem;
      text-align: left;
    }
  }

  .right {
    width: 73%;
    position: relative;
    font-size: 1rem;
    color: var(--emui_mask_regular);

    .leftNumber {
      position: absolute;
      left: 0;
      top: 14px;
    }

    .secondNumber {
      position: absolute;
      left: 25%;
      top: 14px;
    }

    .threeNumber {
      position: absolute;
      left: 46%;
      top: 14px;
    }

    .leftNumber1 {
      position: absolute;
      left: 0;
      top: 14px;
    }

    .secondNumber1 {
      position: absolute;
      left: 48%;
      top: 14px;
    }

    .threeNumber1 {
      position: absolute;
      right: 0;
      top: 14px;
    }

    .fourNumber {
      position: absolute;
      left: 75%;
      top: 14px;
    }

    .rightNumber {
      position: absolute;
      right: 0;
      top: 14px;
    }
  }
}

.dark .volume {
  width: calc(100% - 3.2rem);
  height: 6.4rem;
  display: flex;
  justify-content: left;
  justify-items: flex-start;
  align-content: center;
  align-items: center;
  margin: 0 auto;

  /deep/.van-slider {
    top: -0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .left {
    color: rgba(255, 255, 255, 0.86);
    width: 20%;
    text-align: left;
    min-height: 3.9rem;
    font-size: 1.6rem;

    p {
      margin-top: 0.2rem;
      font-size: 1.2rem;
      text-align: left;
      color: rgba(255, 255, 255, 0.6);
    }
  }

  .right {
    width: 80%;
    position: relative;
    color: rgba(255, 255, 255, 0.86);

    .leftNumber {
      position: absolute;
      left: 0;
      top: 7px;
      color: rgba(255, 255, 255, 0.6);
    }

    .secondNumber {
      position: absolute;
      left: 23%;
      top: 7px;
      color: rgba(255, 255, 255, 0.6);
    }

    .threeNumber {
      position: absolute;
      left: 46%;
      top: 7px;
      color: rgba(255, 255, 255, 0.6);
    }

    .fourNumber {
      position: absolute;
      left: 80%;
      top: 7px;
      color: rgba(255, 255, 255, 0.6);
    }

    .rightNumber {
      position: absolute;
      right: 0;
      top: 7px;
      color: rgba(255, 255, 255, 0.6);
    }
  }
}


.spinnerWrap .spinnerList {
  font-size: 1.6rem;
  height: 4.8rem;
  line-height: 4.8rem;
  color: var(--emui_text_primary);
  position: relative;
  padding: 0 1.2rem;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0.4rem;
}

.spinnerWrap .spinnerList .spinnerItem {
  width: 100%;
}

.spinnerWrap .spinnerList:after {
  position: absolute;
  width: calc(100% - 2.4rem);
  content: "";
  display: block;
  height: 0.1rem;
  bottom: 0;
  transform: scaleY(0.25);
  background: var(--emui_color_divider_horizontal);
  z-index: 101;
}

.spinnerWrap .spinnerList:last-child:after {
  display: none;
}

.spinnerWrap .checkedBg {
  background: var(--emui_accent3);
  border-radius: 1.2rem;
  color: var(--emui_accent2);
}
</style>
